<div ng-init="init()" class="kmi-layout-content A03-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'A03.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page list">
            <div class="kmi-report-panel" ng-show="queryMode != 'list-detail'"></div>
            <div class="switch-content" ng-show="queryMode != 'list-detail'">
                <div class="kmi-button switch-button is-selected" ng-click="genTable()" style="width:100px" ng-class="{'is-selected':queryMode == 'list'}">
                    <label ng-bind="'A03.btn.table' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="kmi-button switch-button" ng-click="genGantt();" ng-class="{'is-selected':queryMode == 'list-gantt'}">
                    <label ng-bind="'A03.btn.gantt' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
                <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--icon_prime" ng-click="ganttSetting();" ng-show="queryMode == 'list-gantt'">
                    <img src="image/icons/settings2.png"></img> 
                </button>
            </div>
            <div ng-show="queryMode == 'list'" class="panel-list">
                <div class="kmi-text-fields work-date-fields">
                    <div style="margin-bottom: 2px;">
                        <label class="label" ng-bind="'A03.work_date' | translate"></label>
                        <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="prevDate();" ng-disabled="disablePreDate">
                            <img src="image/icons/dropleft.png"></img>
                        </button>
                        <input ng-model="nowDateTime" ng-click="showWorkDate();" readonly style="flex:0 0 136px;"></input>
                        <div class="tip"><i class="material-icons">&#xE5CF;</i></div>
                        <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="nextDate();" ng-disabled="disableNextDate">
                            <img src="image/icons/dropright.png"></img>
                        </button>
                    </div>
                </div>
                <div class="kmi-list work-list column-selector" column-selector-id="nowDateTime" style="border-radius:0 0 4px 4px; margin-top: -2px;">
                    <div class="kmi-list__header">
                        <!-- <div class="kmi-list__column" style="flex:0 0 32px;"></div> -->
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column1' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column2' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column3' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column4' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column5' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column6' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column7' | translate"></div>
                        <!-- 20231214 add by Ruke for M#133354 -->
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column13' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column14' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column8' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column9' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column10' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column11' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list.column12' | translate"></div>
                    </div>
                    <!-- 20240117 modify by Alan for#155930 : 修正平板顯示異常 -->
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-repeat="item in masterList[nowDateTime] track by $index ">
                            <!--
                            <div class="kmi-list__column column-border" style="flex:0 0 32px;">
                                <div class="kmi-column-light"></div>
                            </div>
                             -->
							<div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.op_no"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.op_name"></div>
							<div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.machine_no"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.machine_name"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.plot_no"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.item_no"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.item_name"></div>
                            <!-- 20231214 add by Ruke for M#133354 -->
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.ITEMSPEC"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.PRODUCTTYPE"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.qty"></div>
                            <div class="kmi-list__column" style="flex:1;" ng-bind="item.work_date"></div>
							<div class="kmi-list__column" style="flex:1;" ng-bind="item.plot_start_time"></div>
							<div class="kmi-list__column" style="flex:1;" ng-bind="item.plot_end_time"></div>
                            <div class="kmi-can-click" ng-click="openDetail(item);"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-show="queryMode == 'list-detail'" class="panel-list-detail">
                <div class="kmi-list work-list column-selector" column-selector-id="detailList">
                    <div class="kmi-list__header">
                        <!-- <div class="kmi-list__column" style="flex:0 0 32px;"></div> -->
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list2.column1' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list2.column2' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list2.column3' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list2.column4' | translate"></div>
                        <div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list2.column5' | translate"></div>
						<div class="kmi-list__column" style="flex:1;" ng-bind="'A03.list2.column6' | translate"></div>
                    </div>
                    <!-- 20240117 modify by Alan for#155930 : 修正平板顯示異常 -->
                    <div class="kmi-list__row-content">
                        <div class="kmi-list__row" ng-repeat="item in detailList track by $index ">
                            <!--
                            <div class="kmi-list__column column-border" style="flex:0 0 32px;">
                                <div class="kmi-column-light"></div>
                            </div>
                            -->
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="selectPlotNo"></div>
							<div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.op_no"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.op_name"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.status"></div>
                            <div class="kmi-list__column column-border" style="flex:1;" ng-bind="item.qty"></div>
                            <div class="kmi-list__column" style="flex:1;" ng-bind="item.equipment_no"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 20230221 modify by Alan for#127691 : -->
            <div ng-show="queryMode == 'list-gantt'" class="panel-gantt" style="overflow:auto;" id="panel_gantt" perfect-scrollbar>
                <div ng-if="!refresh" gantt  headers="options.headers" data="data" column-width="options.columnWidth" daily="true" max-height="options.maxHeight"
                     api="registerApi" filter-row="{'content': options.filterName}" view-scale="options.viewScale" sort-mode="['model.seq', 'from']">
                    <gantt-tree header="'A03.gantt.name' | translate" content="row.model.name" header-content="filterHeader"></gantt-tree>
                    <!-- 20231214 add by Alan for#133354 : 产品编号、产品名称 -->
                    <gantt-table
                        columns="['model.item_no', 'model.item_name', 'model.qty', 'model.from', 'model.to']"
                        headers="{'model.item_no':('A03.gantt.item_no' | translate), 'model.item_name':('A03.gantt.item_name' | translate), 'model.qty':('A03.gantt.qty' | translate), 'model.from':('A03.gantt.from' | translate), 'model.to':('A03.gantt.to' | translate)}"
                        formatters="tableColumnFormatters"
                        ></gantt-table>
                    <gantt-progress></gantt-progress>
                    <!--<gantt-tooltips content="task.model.name"></gantt-tooltips>-->
                </div>
            </div>
            <!-- 20230221 modify by Alan for#127691 :  -->
            <div class="page-content" ng-if="data && data.length > 0 && queryMode == 'list-gantt'">
                <div class="page-icon">
                    <i class="material-icons">&#xE314;</i>
                    <div class="kmi-can-click"  ng-click="PageConfig.page = (PageConfig.page-1<0?0:PageConfig.page-1);"></div>
                </div>
                <label ng-bind="(PageConfig.page +1)+' / '+PageConfig.total_page"></label>
                <div class="page-icon">
                    <i class="material-icons">&#xE315;</i>
                    <div class="kmi-can-click"  ng-click="PageConfig.page = (PageConfig.page+1>(PageConfig.total_page-1)?(PageConfig.total_page-1):PageConfig.page+1);"></div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-footer"  ng-show="queryMode == 'list-detail'">
            <button class="mdl-button mdl-button--fab mdl-shadow--custom mdl-button--custom1" ng-click="closeDetail()">
                <img src="image/icons/close.png"></img>
            </button>
        </div>
    </div>
</div>
